<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="wrap">
		<view class="panel ">
			<view class="input-header">
				支付宝姓名
			</view>
			<view class="input-item">
				<input class="input-contain" type="text" v-model="formData.cardName" placeholder="请输入支付宝姓名" />
			</view>
			<view class="input-header">
				支付宝账号
			</view>
			<view class="input-item">
				<input class="input-contain" type="text" v-model="formData.cardNumber" placeholder="请输入支付宝账号" />
			</view>
		</view>
		<u-button class="btn" @click="bindHandle()">绑定</u-button>
		<view class="tip">提示：请正确填写收款人的真实姓名和账号，否则将无法正常收款</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					type: 0,
					cardName: '',
					cardNumber: '',
				}
			};
		},
		//页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		created() {
			this.getInfo()
		},
		methods: {
			bindHandle() {
				this.$api.api('userBankCard.bindBankCard', this.formData)
					.then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '绑定成功'
							});
							this.getInfo()
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
					})
			},
			/**
			 *  获取用户信息
			 */
			getInfo() {
				this.$api.api('userBankCard.list')
					.then(res => {
						if(res.data.length>0){
							this.formData = res.data[0]
						}
					});
			},

		}
	};
</script>

<style lang="less">
	page {
		width: 100%;
		background: #f8f8f8;
	}



	.wrap {

		.panel {
			margin-left: 40upx;
			margin-right: 40upx;
			background-color: #FFFFFF;
			box-shadow: rgba(183, 183, 183, 0.3) 0px 1px 10px;
			margin-top: 20upx;
			border-radius: 20upx;

			.input-header {
				display: flex;
				flex-direction: row;
				padding: 20upx;
				font-size: 32upx;
				color: #333333;
			}
		}

		.input-item {
			display: flex;
			flex-direction: row;
			padding: 20upx;

			.input-contain {
				font-size: 30upx;
				color: #333333;
				text-align: left;
				margin-left: 10upx;
				width: 80%;
			}
		}

		.btn {
			margin: 32upx;
			font-size: 16px;
			background: #4fc08d;
			color: white;
		}

		.tip {
			padding: 20upx 60upx;
			font-size: 25upx;
			color: #999999;
			text-align: center;
		}
	}
</style>
